<template>
    <div class="contentBox" >
        <el-form label-width="80" ref="formRef" :model="roleInfoByManger" :rules="rules">
            <el-form-item label="用户编号" prop="uid">
                <el-input type="text" v-model="roleInfoByManger.uid" :disabled="disable"></el-input>
            </el-form-item>
            <el-form-item label="所属角色" prop="roleid">
                <el-select  v-model="roleInfoByManger.roleid">
                    <el-option v-for="item in roleList" :label="item.rolename" :value="item.roleid+''"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save(formRef)">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import {reqAddManger, reqEditManger, reqGetRoleList } from '@/api/common';
import { roleType } from '@/types/role';
import { User } from '@/types/user';
import { computed, onMounted, reactive, ref,watch } from 'vue';
import { FormInstance,FormRules } from 'element-plus';
import { tip } from '@/utils/alert';
const roleInfoByManger=ref<User>({
    id:0,
    uid:'',
    roleid:""
})
const i=ref<boolean>(true)
const disable=computed(()=>{
    if(props.mangerInfo)return true
    return false
})
const emits = defineEmits(['isShow'])
const emitChange = () => {
    emits('isShow', false)
}
const emptyInfo={...roleInfoByManger.value}

const props=defineProps<{
    mangerInfo:User|null
    isChange:boolean
}>()


watch(()=>props.mangerInfo,()=>{
    if(props.mangerInfo){
        const {uid,roleid,id}=props.mangerInfo
        roleInfoByManger.value={uid,roleid,id}
    }else{
        roleInfoByManger.value=emptyInfo        
    }
})  




const formRef=ref<FormInstance>()
const checkUid=(rule:any,value:any,callback:any)=>{
        if(value==''){
            callback(new Error('请输入正确用户编号'))
        }else{
            callback()
        }
}

const checkUsername=(rule:any,value:any,callback:any)=>{
        if(value==''){
            callback(new Error('请输入正确账号'))
        }else{
            callback()
        }
}

const checkPasswd=(rule:any,value:any,callback:any)=>{
        if(value==''){
            callback(new Error('请输入密码'))
        }else{
            callback()
        }
}

const checkRole=(rule:any,value:any,callback:any)=>{
        if(value==''){
            callback(new Error('请选择角色'))
        }else{
            callback()
        }
}

const rules=reactive<FormRules>({
    uid:[{validator:checkUid,trigger:"blur",required:true}],
    roleid:[{validator:checkRole,trigger:"blur",required:true}]
})
const roleList = ref<Array<roleType>>([])
const getRoleList = () => {
    reqGetRoleList().then(res => {
        roleList.value = res.data.data.filter((item:roleType)=>item.roleid!=81903)
    })
}

const save=(formRef:FormInstance|undefined)=>{
    if(!formRef)return
    formRef.validate((valid)=>{
        if(valid){
            console.log(roleInfoByManger.value);
            if(props.mangerInfo){
                reqEditManger(roleInfoByManger.value).then(res=>{
                    console.log(res);
                    
                })
                emitChange()
            }else{
                const {uid,roleid}=roleInfoByManger.value
                console.log({uid,roleid});
                if(uid&&roleid)reqAddManger({uid,roleid}).then(res=>{
                    if(res.data.code!="200"){
                        tip(res.data.info,'error')
                    }else{
                        tip(res.data.info,"success")
                        emitChange()
                    }
                    
                })
               
                
            }
            
        }
    })
    
    
}
onMounted(()=>{
    getRoleList()
})
</script>

<style scoped lang="scss">
.contentBox{
    display: flex;
    justify-content: center;
}
.el-form-item{
    width: 400px;
    .el-button{
        width: 100%;
    }
}
</style>